<template>
	<view>
		<view class="form-wrap">
			<view class="form-item yf-flex-left">
				<view class="item-title">
					<text>*</text>姓名
				</view>
				<input type="text" class="item-input" placeholder="请输入姓名" />
			</view>
			<view class="form-item yf-flex-left">
				<view class="item-title">
					<text>*</text>身份证号
				</view>
				<input type="text" class="item-input" placeholder="请输入身份证号码" />
			</view>
			<view class="form-item yf-flex-left">
				<view class="item-title">
					<text>*</text>所属门店
				</view>
				<input type="text" class="item-input" placeholder="选择所属门店" />
				<uni-icons type="right" size="14" color="#000000" style="margin-left: 16rpx;"></uni-icons>
			</view>
		</view>
		<view class="card-wrap">
			<view class="card-title">
				<text>*</text>请上传您的身份证正反面
			</view>
			<view class="card-item yf-flex-between">
				<image src="/static/commen/cardIcon1.png" mode="aspectFill" class="cardImg"></image>
				<image src="/static/commen/cardIcon2.png" mode="aspectFill" class="cardImg"></image>
			</view>
		</view>
		<!-- 提交  -->
		<view class="btn-wrap yf-flex-center savepadding">
			<view class="btn yf-flex-center" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8FA;
	}

	.form-wrap {
		margin-top: 20rpx;
		background: #fff;
		padding: 0 30rpx;

		.form-item {
			border-bottom: 2rpx solid #F3F5F9; 
			height: 100rpx; 
			.item-title {
				font-size: 28rpx;
				color: #1E2124;
				width: 140rpx;

				text {
					color: #FB2F54;
					font-size: 28rpx;
				}
			}

			.item-input {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: #1E2124; 
				height: 100rpx;
			}
		}
	}
	.card-wrap{
		margin-top: 20rpx;
		background: #fff;
		padding: 0 30rpx 30rpx;
		.card-title{
			font-size: 28rpx;
			color: #1E2124; 
			line-height: 100rpx;
			text {
				color: #FB2F54;
				font-size: 28rpx;
			}
		}
		.card-item{
			width: 100%;
			.cardImg{
				width: 336rpx;
				height: 270rpx;
			}
		}
	}
	.btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		min-height: 108rpx;
		z-index: 10;

		.btn {
			margin: 0 4%;
			height: 96rpx;
			background: linear-gradient(90deg, #92E082 0%, #22CCB1 100%);
			border-radius: 46rpx;
			color: #1E2124;
			font-size: 30rpx;
			width: 92%;
		}
	}
</style>